<script setup lang="ts">
  import { ref } from 'vue'
  import VideoPreview from '@/views/return-factory/repair/form/components/custom-info/VideoPreview.vue'
  import { HMessageBox } from '../message'
  import PdfPreview from '@/views/return-factory/repair/form/components/custom-info/PdfPreview.vue'
  import VueOfficeExcel from '@vue-office/excel'
  import '@vue-office/excel/lib/index.css'
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'

  defineOptions({
    name: 'HFilePreview',
  })

  const props = defineProps({
    fileName: {
      type: String,
      required: true,
    },
    fileUrl: {
      type: String,
      required: true,
    },
  })

  const isImgPreview = ref(false)
  const videoPreviewVisible = ref(false)
  const pdfPreviewVisible = ref(false)
  const excelPreviewVisible = ref(false)
  const worldPreviewVisible = ref(false)

  const onPreviewClick = () => {
    const extendName = props.fileName.split('.').pop()
    if (extendName && ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(extendName)) {
      isImgPreview.value = true
      return
    }

    if (extendName && ['mp4', 'avi', 'm3u8', 'mov', 'mkv', 'flv', 'ts'].includes(extendName)) {
      videoPreviewVisible.value = true
      return
    }

    if (extendName && extendName === 'pdf') {
      pdfPreviewVisible.value = true
      return
    }

    if (extendName && ['xlsx', 'csv'].includes(extendName)) {
      excelPreviewVisible.value = true
      return
    }

    if (extendName && extendName === 'docx') {
      worldPreviewVisible.value = true
      return
    }

    HMessageBox.error('该格式暂不支持预览')
  }
</script>

<template>
  <span class="h-file-preview-component">
    <h-link @click="onPreviewClick">{{ props.fileName }}</h-link>

    <el-image-viewer
      v-if="isImgPreview"
      :url-list="[props.fileUrl]"
      :initial-index="0"
      infinite
      teleported
      @close="isImgPreview = false"
    />

    <video-preview v-model="videoPreviewVisible" :initial-index="0" :video-list="[props.fileUrl]" />
    <pdf-preview v-model="pdfPreviewVisible" :initial-index="0" :pdf-list="[props.fileUrl]" />

    <h-dialog v-model="excelPreviewVisible">
      <vue-office-excel :src="props.fileUrl" :options="{ xls: true }" style="height: 550px" />
    </h-dialog>

    <h-dialog v-model="worldPreviewVisible">
      <vue-office-docx :src="props.fileUrl" style="height: 550px" />
    </h-dialog>
  </span>
</template>
